<template>
  <ReportPage>
    <q-card flat class="card-radius q-ma-md">
      <div class="q-pa-md">
        <div class="page-header">IN OUT SUMMARY</div>

        <div class="row justify-center items-center q-my-md">
          <div bordered class="my-card" style="height: 500px; width: 500px">
            <q-card-section style="height: 500px; width: 500px">
              <v-chart class="chart" :option="last7" autoresize />
            </q-card-section>
          </div>
          <div bordered class="my-card" style="height: 500px; width: 500px">
            <q-card-section style="height: 500px; width: 500px">
              <v-chart class="chart" :option="last30" autoresize />
            </q-card-section>
          </div>
          <div bordered class="my-card" style="height: 500px; width: 500px">
            <q-card-section style="height: 500px; width: 500px">
              <v-chart class="chart" :option="total" autoresize />
            </q-card-section>
          </div>
        </div>
      </div>
    </q-card>
    <q-card flat class="card-radius q-ma-md">
      <div class="q-pa-md">
        <div class="page-header">
          Part Registration in CEWS Production Team(Last 24 months)
        </div>
          <div bordered style="height: 500px; width: 90vw">
            <q-card-section style="height: 500px; width: 90vw">
              <v-chart class="chart" :option="registration" autoresize />
            </q-card-section>
          </div>

      </div>
    </q-card>
  </ReportPage>
</template>

<script setup lang="ts">
import VChart, { THEME_KEY } from 'vue-echarts';
import { use } from 'echarts/core';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
import {
  PieChart,
  LineChart,
  BarChart,
  SunburstChart,
  MapChart,
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  // SingleAxisComponent,
  ToolboxComponent,
  AxisPointerComponent,
  VisualMapComponent,
  GeoComponent,
} from 'echarts/components';
import { initRegistration, inoutSummary } from 'src/services/reportService';

const last7 = ref({
  title: {
    text: 'Last 7 days',
    subtext: '',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [] as { value: number; name: string }[],
      label: {
        formatter: '{b}: {@2012} \n ({d}%)',
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

const last30 = ref({
  title: {
    text: 'Last 30 days',
    subtext: '',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [] as { value: number; name: string }[],
      label: {
        formatter: '{b}: {@2012} \n ({d}%)',
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

const total = ref({
  title: {
    text: 'Total',
    subtext: '',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [] as { value: number; name: string }[],
      label: {
        formatter: '{b}: {@2012} \n ({d}%)',
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

const registration = ref({
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [] as string[]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [] as number[],
      type: 'line',
      areaStyle: {}
    }
  ]
});

use([
  SVGRenderer,
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  MapChart,
  SunburstChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  AxisPointerComponent,
  VisualMapComponent,
  GeoComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
]);

provide(THEME_KEY, 'light');

import ReportPage from 'src/pages/ReportPage.vue';
import { ref, provide } from 'vue';

async function initData() {
  const res = await inoutSummary();
  console.log(res);

  last7.value.series[0].data = res.last7;
  last30.value.series[0].data = res.last30;
  total.value.series[0].data = res.total;
}

async function initRegistrationData() {
  const res = await initRegistration()

  registration.value.xAxis.data = res.date.map((i)=>{
    return i.slice(0,7)
  })
  registration.value.series[0].data = res.value
  
}

initData();
initRegistrationData()
</script>

<style scoped></style>
